<template>
    <div class="login-wrap">
      <el-form class="login-container" ref="userLogin" :model="user" :rules="rules" label-width="80px" label-position="left">
        <h3 class="title">房主登录</h3>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-button type="primary" class="btn_submit" :loading="logining" @click="submitForm('userLogin')">登录</el-button>
        <el-row>
          <el-col :span="8" :offset="16">
            <router-link to="/register" class="register">我要成为房主</router-link>
          </el-col>
        </el-row>
      </el-form>
    </div>
</template>

<script>
    import ElCol from 'element-ui/packages/col/src/col';
    export default {
      components: {ElCol},
      data() {
        return {
          logining: false,
          user: {
            username: '',
            password: ''
          },
          rules: {
            username: [
              {
                required: true,
                message: '请输入用户名',
                trigger: 'blur'
              }
            ],
            password: [
              {
                required: true,
                message: '请输入密码',
                trigger: 'blur'
              }
            ]
          }
        };
      },
      methods: {
        // 对表单进行验证
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            // 若验证成功valid为true 否则为false
            console.log('valid', valid);
            if (valid) {
              this.logining = true;
              // 发送登录请求
              this.login();
            }
          });
        },
        login() {
          this.$http.post('/api/host/user/login.do', this.$qs.stringify(this.user))
            .then((response) => {
              this.logining = false;
              var data = response.data;
              if (data.status === 0) {
                this.$router.push({path: '/home'});
              } else {
                this.$message.error(data.msg);
              }
            })
            .catch((error) => {
              this.$message.error(error.msg);
            });
        }

      }
    };
</script>

<style scoped>
  .login-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 422px;
    height: 354px;
    box-sizing: border-box;
    box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.06);
    border-radius: 5px;
    margin: -177px 0 0 -211px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .btn_submit{
    width: 100%;
    margin-bottom: 10px;
  }
  .register {
    font-size: 14px;
    color: #666;
  }
  .register:hover {
    color: #409EFF;
  }
</style>
